<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title></title>
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${pageContext.request.contextPath}/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/respond.min.js"></script>
    <![endif]-->

    <style>
        .head-one {
            padding: 20px;
            box-sizing: inherit;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease;
            transition-delay: 0s;
        }

        .head-two {
            margin-top: 20px;
            border: 1px solid #ebeef5;
            background-color: #fff;
            color: #303133;
            transition: .3s;
        }

        .head-three {
            margin-top: 20px;
            box-sizing: inherit;
            display: block;
            border: 1px solid #ebeef5;
        }

        .table-main {
            text-align: center;
            line-height: 100%;
        }

        .head-three table th {
            border: 1px solid grey;
        }

        .el-card__body > .head-one1 {
            font-size: 16px;
        }

        .el-card__body {
            margin-bottom: 15px;
            padding: 20px 20px 10px 20px;
            background-color: white;
            font-size: 14px;
        }

        .el-table th {
            white-space: nowrap;
            overflow: hidden;
            user-select: none;
            padding: 12px 0;
            min-width: 0;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
        }

        .el-table--border th {
            border-right: 1px solid #ebeef5;
        }

        .el-table__header {
            table-layout: fixed;
            border-collapse: separate;
        }

        .el-table--border td {
            border-bottom: 1px solid #ebeef5;
        }

        .cell {
            box-sizing: border-box;
            white-space: normal;
            word-break: break-all;
            line-height: 23px;
        }

        label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
        }

        .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            padding-top: 0.25em;
        }

        ul .pagination {
            margin: 0;
        }
    </style>
</head>

<body class="sticky-header">


<jsp:include page="../inc/left.jsp"/>


<!-- main content start-->
<div class="main-content">


    <jsp:include page="../inc/header.jsp"/>



    <!--body wrapper start-->

    <div data-v-2ef16592="" class="el-card filter-container is-never-shadow"><!---->
        <div class="el-card__body">
            <div data-v-2ef16592=""><i class="fa fa-search" aria-hidden="true"></i></i> <span
                    data-v-2ef16592="">筛选搜索</span>
<%--            <a href="${pageContext.request.contextPath}sell/projectSearch">--%>
                <button data-v-2ef16592="" type="button" onclick="subjectSearch()" class="btn btn-info"
                                                                                                   style="float: right;"><!----><!----><span>
        搜索
      </span></button>
                <button data-v-2ef16592="" type="button" class="btn-default"
                        style="float: right; margin-right: 15px;"><!----><!----><span>
        重置
      </span></button>
            </div>
            <div data-v-2ef16592="" style="margin-top: 15px;" class="head-one">
                <form data-v-2ef16592="" class="el-form el-form--inline">
                    <div class="row">
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4">

                            <div class="el-form-item__content">
                                <div data-v-2ef16592="" class="input-width el-input el-input--small">
                                    <!---->
                                    <label
                                            class="el-form-item__label"
                                            style="width: 70px;">专题名称：
                                    </label>
                                    <input
                                        type="text" autocomplete="off" placeholder="专题名称" class="el-input__inner" id="subjectName">
                                    <!---->
                                    <!----><!----></div><!----></div>
                        </div>
                        <div data-v-2ef16592="" class="el-form-item el-form-item--small col-md-4">

                            <div class="el-form-item__content">
                                <div data-v-2ef16592="" class="el-select input-width el-select--small"><!---->
                                    <div class="el-input el-input--small el-input--suffix"><!---->
                                        <label
                                                class="el-form-item__label"
                                                style="width: 70px;">推荐状态：
                                        </label>
                                        <select type="" autocomplete="off" placeholder="全部" readonly="readonly" class="el-input__inner" id="recommendStatus">
                                        <!----><span class="el-input__suffix">
                                            <span class="el-input__suffix-inner"><i
                                                class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                                            <!----></span>
                                            <!----></span><!---->
                                            <option value="">全部</option>
                                            <option value="1">推荐中</option>
                                            <option value="0">未推荐</option>
                                        </select>
                                    </div>
                                </div><!----></div>
                        </div>
                    </div>
                </form>
            </div>
            <div data-v-2ef16592="" class="el-card operate-container is-never-shadow head-two "><!---->
                <div class="el-card__body"><i class="fa fa-server" aria-hidden="true"></i> <span data-v-2ef16592=""
                                                                                                    class="head-one1">数据列表</span>
                    <a href="${pageContext.request.contextPath}/sell/addRecommendProject">
                        <button data-v-2ef16592="" type="button"
                                class="btn-primary el-button btn-add el-button--default el-button--mini "
                                style="margin-left: 1150px"><!----><!----><span>添加专题</span>
                        </button>
                    </a>
                </div>
            </div>


            <div class="head-three">
                <table class="table table-bordered table-main">
                    <thead>
                    <tr>
                        <th style="text-align: center"><input type="checkbox" id="input-all"></th>
                        <th style="text-align: center">编号</th>
                        <th style="text-align: center">专题名称</th>
                        <th style="text-align: center">是否推荐</th>
                        <th style="text-align: center">排序</th>
                        <th style="text-align: center">状态</th>
                        <th style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody id="123">

                    <c:forEach items="${pageMadel.list}" var="r">
                        <tr>
                            <td><input type="checkbox" id="checks"></td>
                            <td id="#ddd">${r.id}</td>
                            <td>${r.subjectName}</td>
                            <td>
                                <c:if test="${r.recommendStatus==1}">
                                    <i class="fa fa-toggle-on" aria-hidden="true" style="color: #0e90d2;font-size: 30px"  onclick="changeStatus(${r.recommendStatus},${r.id})"></i>
                                </c:if>
                                <c:if test="${r.recommendStatus==0}">
                                    <i class="fa fa-toggle-off" aria-hidden="true" style="font-size: 30px"  onclick="changeStatus(${r.recommendStatus},${r.id})" ></i>
                                </c:if>

                            </td>
                            <td>${r.sort}</td>
                        <td>
                            <c:if test="${r.recommendStatus==1}">
                                推荐中
                            </c:if>

                            <c:if test="${r.recommendStatus==0}">
                               未推荐
                            </c:if>
                        </td>


                            <td>
                                <button class="btn-info" onclick="shezhi(${r.id})">设置排序</button>
                                <button id="btn-delete" class="btn-danger" onclick="del(${r.id})">删除</button>
                            </td>
                        </tr>
                    </c:forEach>


                    </tbody>
                </table>
                <ul class="pagination" id="abcd" style="line-height: 35px">
                    <c:if test="${pageMadel.page>1}">
                        <li><a href="recommend?page=${pageMadel.page-1}">&laquo;</a></li>
                    </c:if>

                    <c:forEach begin="1" end="${pageMadel.pageSize}" var="i">
                        <li class="${pageMadel.page==i?"active":""}"><a href="recommend?page=${i}">${i}</a></li>
                    </c:forEach>

                    <c:if test="${pageMadel.page<pageMadel.pageSize}">
                        <li><a href="recommend?page=${pageMadel.page+1}">&raquo;</a></li>
                    </c:if>
                    <div class="pagination">
                        <span>共${pageMadel.count}条</span>
                        <span>前往</span>
                    </div>
                    <div class="pagination">
                        <form action="recommend?page=">
                            <input name="page" style="width: 50px;height: 20px;text-align: center">
                        </form>
                    </div>
                    <div class="pagination">
                        <span>页</span>
                    </div>
                    <div class="pagination">
                        <form>
                            <select id="520" name="size" onchange="change111()">
                                <option  value="5" ${pageMadel.size==5?'selected':''}>5条一页</option>
                                <option   value="10" ${pageMadel.size==10?'selected':''}>10条一页</option>
                                <option   value="20" ${pageMadel.size==20?'selected':''}>20条一页</option>
                            </select>
                        </form>
                    </div>
                </ul>

            </div>
        </div>
    </div>
    <!-- End Wrapper-->


    <%@include file="../inc/footer.jsp" %>


</div>
<!--End main content -->
<script>

    let pageNow = 1;
    function change111(){
        var size=$("#520").val()

        location.href = "${pageContext.request.contextPath}/sell/recommend?size=" +size;
    }
    let all = document.getElementById(`input-all`)
    let ches = document.querySelector("tbody").getElementsByTagName("input")
    all.onclick = function () {
        for (let i = 0; i < ches.length; i++) {
            ches[i].checked = this.checked
        }
    }
    for (let i = 0; i < ches.length; i++) {
        ches[i].onclick=function () {
            all.checked=this.checked
        }
    }
    function del(id) {
        let sure = confirm("确定删除吗？");
        if (sure) {
            location.href = "${pageContext.request.contextPath}/sell/deleteByRecommendProjectId/" + id;
        }
    }
    function dianji() {
            console.info("确认删除")
    }
    function shezhi(id) {
            location.href = "${pageContext.request.contextPath}/sell/setRecommendProjectSort/" + id;
    }

    function changeStatus(recommendStatus,id) {
        const GetRecommendStatus = $("#recommendStatus").val();
        if (recommendStatus==1){
            recommendStatus=0;
        }else if (recommendStatus==0){
            recommendStatus=1;
        }
        const subjectName = $("#subjectName").val();
        const page = pageNow;
        $.ajax({
                type : 'get',
                url : "${pageContext.request.contextPath}/sell/changeStatus",
                data : {
                    "id" : id,
                    "page": page,
                    "subjectName":subjectName,
                    "recommendStatus":recommendStatus,
                    "GetRecommendStatus":GetRecommendStatus,
                },
                success : function(result) {
                    var rows=result.list;
                    var html = '';
                    for (var i = 0; i<rows.length; i++) {
                        html += '<tr>' ;
                        html+='<td><input type="checkbox" id="checks"></td>'
                        var leaderNoVal=setNullToEmpty(rows[i].subjectId);
                        html+='<td>'+ leaderNoVal+'</td>';
                        var passwordVal=setNullToEmpty(rows[i].subjectName);
                        html+='<td>'+ passwordVal+'</td>';
                        var realNameVal=setNullToEmpty(rows[i].recommendStatus);
                        if (realNameVal == 1){
                            html+='<td>'+ '<i class="fa fa-toggle-on" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus('+rows[i].recommendStatus+','+rows[i].id+')"></i>'+'</td>';
                        }else{
                            html+='<td>'+ '<i class="fa fa-toggle-off" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus('+rows[i].recommendStatus+','+rows[i].id+')"></i>'+'</td>';
                        }

                        var celPhoneVal=setNullToEmpty(rows[i].sort);
                        html+='<td>'+ celPhoneVal+'</td>';
                        var realNameVal=setNullToEmpty(rows[i].recommendStatus);
                        if (realNameVal == 1){
                            html+='<td>'+ '推荐中' +'</td>';
                        }else{
                            html+='<td>'+ '不推荐' +'</td>';
                        }


                        html+='<td>';
                        html+='<a href="${pageContext.request.contextPath}/sell/setRecommendProjectSort/'+rows[i].id+'" class="btn-info">设置排序</a>';
                        html+=' <button id="btn-delete" class="btn-danger" onclick="del('+ rows[i].id +')">删除</button>';
                        html+='</td>';
                        html+='</tr>';
                    }
                    $("#123").html(html)
                    var html2 = '';
                    var a=result.pages
                    console.info(a)
                    if (result.pageNum == 1){
                        html2+=''
                    }else{
                        html2+='<li><a  style="cursor: pointer" onclick="subjectSearch('+ result.prePage + ')">' + '<<'  + '</a></li>'
                    }
                    for (var i = 1; i<= a; i++){
                        if (i == result.pageNum){
                            html2+='<li class="active"><a  style="cursor: pointer" onclick="subjectSearch('+ i + ')">' + i +'</a>'+'</li>'
                            pageNow = i;
                        }else {
                            html2+='<li><a style="cursor: pointer" onclick="subjectSearch('+ i + ')">' + i +'</a>'+'</li>'
                        }

                    }
                    if(result.pageNum == result.pages){
                        html2+=''
                    }else {
                        html2+='<li><a  style="cursor: pointer"     onclick="subjectSearch('+ result.nextPage + ')">' + '>>' +'</a></li>'
                    }
                    $("#abcd").html(html2)
                }
            });
        }

    function subjectSearch(a) {
        const subjectName = $("#subjectName").val();
        const recommendStatus = $("#recommendStatus").val();
        const page = a;
        $.ajax({
            type : 'get',
            url : "${pageContext.request.contextPath}/sell/recommend_1",
            data : {
                "page": page,
                "subjectName":subjectName,
                "recommendStatus":recommendStatus,
            },
            success : function(result) {
                var rows=result.list;
                var html = '';
                for (var i = 0; i<rows.length; i++) {
                    html += '<tr>' ;
                    html+='<td><input type="checkbox" id="checks"></td>'
                    var leaderNoVal=setNullToEmpty(rows[i].subjectId);
                    html+='<td>'+ leaderNoVal+'</td>';
                    var passwordVal=setNullToEmpty(rows[i].subjectName);
                    html+='<td>'+ passwordVal+'</td>';
                    var realNameVal=setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1){
                        html+='<td>'+ '<i class="fa fa-toggle-on" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus('+rows[i].recommendStatus+','+rows[i].id+')"></i>'+'</td>';
                    }else{
                        html+='<td>'+ '<i class="fa fa-toggle-off" aria-hidden="true" style="color: #0e90d2;font-size: 30px" onclick="changeStatus('+rows[i].recommendStatus+','+rows[i].id+')"></i>'+'</td>';
                    }

                    var celPhoneVal=setNullToEmpty(rows[i].sort);
                    html+='<td>'+ celPhoneVal+'</td>';
                    var realNameVal=setNullToEmpty(rows[i].recommendStatus);
                    if (realNameVal == 1){
                        html+='<td>'+ '推荐中' +'</td>';
                    }else{
                        html+='<td>'+ '不推荐' +'</td>';
                    }


                    html+='<td>';
                    html+='<a href="${pageContext.request.contextPath}/sell/setRecommendProjectSort/'+rows[i].id+'" ><button class="btn-info">设置排序</button></a>';
                    html+=' <button id="btn-delete" class="btn-danger" onclick="del('+ rows[i].id +')">删除</button>';
                    html+='</td>';
                    html+='</tr>';
                }
                $("#123").html(html)
                var html2 = '';
                var a=result.pages
                console.info(a)
                if (result.pageNum == 1){
                    html2+=''
                }else{
                    html2+='<li><a  style="cursor: pointer" onclick="subjectSearch('+ result.prePage + ')">' + '<<'  + '</a></li>'
                }
                for (var i = 1; i<= a; i++){
                    if (i == result.pageNum){
                        html2+='<li class="active"><a  style="cursor: pointer" onclick="subjectSearch('+ i + ')">' + i +'</a>'+'</li>'
                        pageNow = i;
                    }else {
                        html2+='<li><a style="cursor: pointer" onclick="subjectSearch('+ i + ')">' + i +'</a>'+'</li>'
                    }

                }
                if(result.pageNum == result.pages){
                    html2+=''
                }else {
                    html2+='<li><a  style="cursor: pointer"     onclick="subjectSearch('+ result.nextPage + ')">' + '>>' +'</a></li>'
                }
                $("#abcd").html(html2)
            }
        });
    }


    function setNullToEmpty(val){//将所有空数据都转为'-'
        if(val===null||val==='null'||val===''||val==undefined||val=='undefined'){
            return '-';
        }
        return val;
    }
</script>

<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/moment/moment.js"></script>
<script src="assets/js/jquery.slimscroll.js "></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->

</body>

</html>

